<template>
    <div class="success-box">
        <div class="success-img"> 
            <img src="/images/success.png" alt="">
        </div>
        <div class="txt">{{text}}<slot/></div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        text:String
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .success-box{
        text-align: center;
        width: 700px;
        padding: 0 0 50px 0;
        .success-img{
            padding: 50px 0 40px 0;
            img{
                display: block;
                margin: 0 auto;
                width: 120px;
            }
        }
        .txt{
            font-family: Poppins-SemiBold, Poppins;
            font-weight: 600;
            color: #DFFCFF;
            line-height: 20px;
            text-shadow: 0px 0px 6px #07A3FB;
            background-clip: text;
            -webkit-background-clip: text;
            //-webkit-text-fill-color: transparent;
            font-size: 38px;
        }
    }
</style>